<template>
  <div class="goods-collection">
    <div class="goods-heading">
      店铺收藏
      <router-link v-show="more === '1'" class="goods-more" to="/member/shopCollection">
        更多
        <i class="el-icon-arrow-right"></i>
      </router-link>
    </div>
    <div class="goods-context">
      <div class="goods-change">
        <div class="goods-group">
          <ul class="el-row">
            <li v-for="s in shops" :key="s.id" class="el-col-6 goods-list">
              <div class="goods-text">
                <a href="#">
                  <img class="goods-img center-block" :src="s.pic" :alt="s.name">
                </a>
                <h5 class="text-overflow">
                  <a href="#" :title="s.name">{{ s.name }}</a>
                  <span class="text-span">{{s.business}}</span>
                </h5>
                <div class="action">
                  <a class="btn el-icon-s-shop" href='' title="进店逛逛"></a>
                  <button class="btn el-icon-close" title="删除" @click="deleteAddress"></button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {reactive} from "vue";

  export default {
    name: "SCollection",
    props:['more'],
    setup(){
      let shops = reactive([
        {
          id:'01',
          name:'小象电商',
          pic:require("@/assets/image/dpsc1.jpg"),
          business:'自营'
        },
      ])

      function deleteAddress(id){
        if(confirm('您确定要删除吗？')){
          console.log('删除该地址。',id)
        }
        else{
          console.log('误点删除按键，请返回！')
        }
      }

      return {
        shops,
        deleteAddress,
      }
    }
  }
</script>

<style scoped>
  *{
    font-size: 12px;
    color: #333;
  }
  a{
    text-decoration: none;
    color: #666666;
  }
  ul{
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .goods-collection{
    background-color: white;
    margin-bottom: 17px;
  }
  .goods-heading{
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .goods-more{
    color: #bfbfbf;
    float: right;
  }
  .goods-context{
    padding: 15px;
    height: 100%;
  }
  .goods-change{
    margin-left: 10px;
  }
  .goods-group{
    width: 100%;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 15px;
  }
  .goods-list{
    margin-bottom: 15px;
    float: none !important;
    display: table-cell;
  }
  .goods-text{
    height: 110px;
    padding: 15px 10px 10px 10px;
    margin-right: 15px;
    position: relative;
    text-align: center;
    transition: box-shadow 0.3s, border-color 0.3s;
    border: 1px solid #e8e8e8;
  }
  .goods-text:hover{
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08);
    border-color: #dddddd;
  }
  .goods-text:hover .action{
    display: block;
  }
  .goods-img{
    max-width: 100%;
    height: auto;
    margin: 10px auto;
  }
  .text-overflow{
    margin: 0;
    line-height: 25px;
    height: 25px;
  }
  .text-span{
    color: white;
    background-color: #409EFF;
    padding: 2px 7px;
    margin-left: 10px;
    text-align: center;
    border-radius: 4px;
  }
  .text-overflow a{
    font-size: 13px;
    font-weight: normal !important;
  }
  .goods-price{
    font-size: 12px;
    color: #f78e3d;
  }
  .action{
    display: none;
    position: absolute;
    right: 10px;
    bottom: 15px;
  }
  .btn{
    font-size: 14px;
    padding: 3px;
    margin-right: 5px;
    color: #666666;
    background-color: white;
    transition: all 0.3s;
    border: 1px #d8d8d8 solid;
    border-radius: 4px;
  }
  .btn:hover{
    color: #409EFF;
    border-color: #409EFF;
  }
</style>